<script setup>

</script>

<template>
  <div class="branBox ">
    <div class="wid ">
      <h2 class="title text-align-center">—— 五大支持中心 ——</h2>
      <div class="swiper-bran">
        <img src="../../assets/city.png" class="w-1/1" alt="">
<!--        <div class="list ">
          <ul>
            <li>
              <div class="pic"><img src="../../assets/1711530568716801.png"></div>
              <div class="txtb">
                <div class="name font18">北京北检</div>
              </div>
            </li>

            <li>
              <div class="pic"><img src="../../assets/1711530568716801.png"></div>
              <div class="txtb">
                <div class="name font18">成都北检</div>
              </div>
            </li>

            <li>
              <div class="pic"><img src="../../assets/1711530568716801.png"></div>
              <div class="txtb">
                <div class="name font18">福州北检</div>
              </div>
            </li>

            <li>
              <div class="pic"><img src="../../assets/1711530568716801.png"></div>
              <div class="txtb">
                <div class="name font18">上海北检</div>
              </div>
            </li>

          </ul>
        </div>-->
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">

.branBox {padding: 5.2em 0 4.2em; background-color: #f5f5f5;}

.branBox .swiper-bran { margin-top: 4.3em;}

.swiper-bran { width: 100%; margin: 0 auto; position: relative; padding: 0 10px; background-color: #fff; }

.swiper-bran .list {padding: 2.8em 0 4.3em;}

.swiper-bran .list ul { display: flex;
  flex-wrap:                     wrap; justify-content: flex-start; align-items: stretch;}

.swiper-bran .list li { position: relative; z-index: 0; width: 23.4%; margin: 2.1% 2.1% 0 0;
  overflow:                       hidden;}

.swiper-bran .list li:nth-child(4n) { margin-right: 0;}

.swiper-bran .list .pic { display: block; cursor: pointer;
  position:                        relative; z-index: 0;
  padding-top:                     69%; overflow: hidden; background-color: #fff;}

.swiper-bran .list .pic img { position: absolute; left: 0;
  top:                                  0; width: 100%; height: 100%; object-fit: cover;
  transition:                           all 0.5s;
  -webkit-transition:                   all 0.5s;}

.swiper-bran .list li:hover .pic img {
  -ms-transform:     scale(1.03, 1.03);
  -webkit-transform: scale(1.03, 1.03);
  transform:         scale(1.03, 1.03);
  }

.swiper-bran .list .txtb { position: absolute; left: 0; top: 0;
  right:                             0; height: 100%;
  display:                           flex; justify-content: center; align-items: center;
  }

.swiper-bran .list .txtb .name { padding: 0 2em; font-weight: bold;font-family: "思源宋体 CN"; color: #fff;
  background-color:                       rgba(0, 0, 0, 0.4); line-height: 3.5em;}


</style>
